import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtActionSheet, AtIcon } from 'taro-ui'
import './dLinearLayout.scss'
import '../../../icon.scss';

export class Service extends Component {
  state = {
    openAtAction: false,
  }
  componentDidMount () { 
  }

  handleShowAtAction(){
      this.setState({
        openAtAction:true
      });
  }

  handleCloseAtAction(){
    this.setState({
      openAtAction:false
    });
  }

  render () {
    const { openAtAction } = this.state;
    return (
      <View className='atAction-content'>
          <View className='dLinearLayout' onClick={() => this.handleShowAtAction()}>
            <View className='dLinearLayout-left'>服务</View>
            <View  className='dLinearLayout-center'>
              <View className='dLinearLayout-content'>
                <View className='black'>破损包退 360质保 正品保证</View>
              </View>
            </View>
            <View className='dLinearLayout-right'>
              <AtIcon value='chevron-right' size='16' color='#8d8d8d'></AtIcon>
            </View>
          </View>

          <AtActionSheet isOpened={openAtAction}>
            <View className='at-title'>基础服务</View>
            <View className='at-content'>
              <View className='service-item'>
                <View className='service-item-icon'>
                  <AtIcon value='check-circle' size='16' color='#e48912'></AtIcon>
                </View>
                <View className='service-item-content'>
                  <Text className='service-item-name'>7天无理由</Text>
                  <Text>满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。</Text>
                </View>
              </View>
              <View className='service-item'>
                <View className='service-item-icon'>
                  <AtIcon value='check-circle' size='16' color='#e48912'></AtIcon>
                </View>
                <View className='service-item-content'>
                  <Text className='service-item-name'>7天无理由</Text>
                  <Text>满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。</Text>
                </View>
              </View>
            </View>
            <View className='at-button'>
              <View className='button' onClick={() => this.handleCloseAtAction()}>完成</View>
            </View>
          </AtActionSheet>
        </View>
    )
  }
}